导航菜单
首页 >  Asset Modules资源模块  > 资源模块

资源模块

资源模块#

资源(如:图片、字体、视频等)是 Rspack 的一等公民,这意味着你不需要任何的 Loader 来处理这些内容。资源和其他的模块类型不同,它们通常是独立存在的,因此资源会以模块的粒度做最终的生成。

Module 与 Chunk

其他模块类型例如 JavaScript 模块,它们通常会合并成一个 Chunk 做最后的生成。而对于资源模块来说,它几乎无法被 Bundle,因此资源模块通常是独立存在的。这也是为什么叫“资源模块”的一个最直接的原因。

支持的 Asset Module 类型#'asset/inline': 将资源转换为 DataURI,使用 Base64 编码,暂不支持编码配置。'asset/resource': 将资源转换为单独的文件,并且导出产物地址。'asset':根据条件(如:资源的体积)自动选择 'asset/inline' 或 'asset/resource'。默认如果资源体积小于等于 8096 bytes,则使用 'asset/inline' 策略,否则使用 'asset/resource' 策略。'asset/source': 将资源文件转为字符串导出。示例#使用 type: 'asset' 根据条件自动选择策略#rspack.config.jsmodule.exports = { module: {rules: [ {test: /\.png$/,type: 'asset', },], },};

默认情况下,如果资源体积小于等于 8096 bytes,则使用 'asset/inline' 策略,否则使用 'asset/resource' 策略。

如果你希望修改这个行为,可以使用 module.parser.asset.dataUrlCondition 来修改全局的配置,或使用 Rule.parser.dataUrlCondition 对特定符合条件的模块单独配置。

使用 type: 'asset/inline' 替换 url-loader#rspack.config.jsmodule.exports = { module: {rules: [ {test: /\.png$/,-use: [- {-loader: 'url-loader',- },-],+type: 'asset/inline' },], },};使用 type: 'asset/resource' 替换 file-loader#rspack.config.jsmodule.exports = { module: {rules: [ {test: /\.png$/,-use: [- {-loader: 'file-loader',- },-],+type: 'asset/resource' },], },};使用 type: 'asset/source' 替换 raw-loader#rspack.config.jsmodule.exports = { module: {rules: [ {resourceQuery: /raw/,-use: [- {-loader: 'raw-loader',- },-],+type: 'asset/source' },], },};使用 Optimizer Loader#

有些时候我们希望对特定的图片进行优化,比如压缩图片的体积。我们仍旧可以使用这些 Loader。

例如对所有 .png 结尾的文件使用 image-minimizer-webpack-plugin 进行优化:

rspack.config.jsconst ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');module.exports = { module: {rules: [ {test: /\.png$/,use: [ {loader: ImageMinimizerPlugin.loader,options: { // ...}, },],type: 'asset/resource', },], },};

上述条件中使用了 type: 'asset/resource',这会引导 Rspack 对所有匹配的文件完成单独的文件生成,并返回最终的产物地址。

相关推荐: